import React, { useEffect, useReducer, useState } from 'react';
import { Anchor, Col, Row } from 'antd';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism';
import MarkNav from 'markdown-navbar';
import 'markdown-navbar/dist/navbar.css';
import { useModel } from 'umi';

export default (prods) => {
  //数据模型
  const articleModel = useModel('article', (model) => ({
    data: model.data,
    getDetail: model.getDetail,
  }));
  //搜索
  const [search, setSearch] = useState({
    id: 0,
  });
  //初始化
  useEffect(() => {
    if (prods.match.params.id) {
      search.id = prods.match.params.id;
    } else {
      search.id = 0;
    }
    setSearch(search);
    articleModel.getDetail(search);
  }, [prods.match.params.id]);
  return (
    <Row>
      <Col xs={24} sm={24} md={16} lg={16} xl={16}>
        <ReactMarkdown
          children={articleModel.data.content_md}
          remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
          components={{
            code({node, inline, className, children, ...props}) {
              const match = /language-(\w+)/.exec(className || '')
              return !inline && match ? (
                <SyntaxHighlighter
                  children={String(children).replace(/\n$/, '')}
                  style={dark}
                  language={match[1]}
                  PreTag="div"
                  {...props}
                />
              ) : (
                <code className={className} {...props}>
                  {children}
                </code>
              )
            }
          }}
        ></ReactMarkdown>
      </Col>
      <Col xs={0} sm={0} md={8} lg={8} xl={8}>
        <Anchor>
          <div className="markNav-title">文章目录</div>
          <MarkNav
            className="article-menu"
            source={articleModel.data.content_md}
            headingTopOffset={80}
          />
        </Anchor>
      </Col>
    </Row>
  );
};
